<template>
  <div>
    <h3 class="title">{{ $t("duty.title") }}</h3>
    <div class="search">
      <el-input
        class="input-with-select"
        :placeholder="$t('duty.search.placeholder')"
        v-model="queryInfo.query_text"
      >
        <!-- <el-select
          v-model="select"
          slot="prepend"
          placeholder="搜索条件"
          style="width: 140px"
        >
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select> -->

        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-button type="primary" @click="searchDuty">{{
        $t("duty.search.searchBtn")
      }}</el-button>
      <el-button type="info" plain @click="resetSearch">{{
        $t("duty.search.resetBtn")
      }}</el-button>
    </div>

    <el-table :data="dutyList" height="680px" border stripe style="width: 100%">
      <el-table-column type="index" :label="$t('duty.table.index')" width="65">
      </el-table-column>
      <el-table-column :label="$t('duty.table.result')" width="65">
        <template slot-scope="scope">
          <div
            v-show="scope.row.dutyState"
            class="dutyState"
            style="background-color: #67c23a"
          ></div>
          <div
            v-show="!scope.row.dutyState"
            class="dutyState"
            style="background-color: #aaaaaa"
          ></div>
        </template>
      </el-table-column>
      <el-table-column prop="staff_data.name" :label="$t('duty.table.duty')">
      </el-table-column>
      <el-table-column :label="$t('duty.table.time')" min-width="420px">
        <template slot-scope="scope">
          <div class="block">
            <!-- <span class="demonstration">{{ scope.row }}</span> -->
            <el-date-picker
              v-model="scope.row.dutyTime"
              type="datetimerange"
              range-separator="-"
              start-placeholder="Start time"
              end-placeholder="End time"
              format="yyyy-MM-dd HH:mm:ss"
              readonly
            >
            </el-date-picker>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="dutyRecord"
        :label="$t('duty.table.record')"
        v-if="power.type != 2"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="dutyRecords(scope)">{{
            $t("duty.btn.detail")
          }}</el-button>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="faultRecord" label="故障记录">
        <template slot-scope="scope">
          <el-button type="text">故障记录详情</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="footer">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-size="queryInfo.pagesize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <DutyRecordsDialog
      :dutyRecordsVisible="dutyRecordsVisible"
      :watchList="watchList"
      :watch="watch"
      :formData="formData"
      @closeDialog="dutyRecordsVisible = false"
    ></DutyRecordsDialog>
  </div>
</template>

<script>
import DutyRecordsDialog from "../../../components/DutyRecordsDialog.vue";
export default {
  components: { DutyRecordsDialog },
  data() {
    return {
      // 权限
      power: 0,
      total: 0,
      // 获取爬虫的参数对象
      queryInfo: {
        // 当前的页数
        page: 1,
        // 当前每页显示多少条数据
        pagesize: 8,
        query_text: "",
      },
      // 人员信息
      watchList: [],
      // 搜索内容
      searchText: "",
      // 搜索条件列表
      options: [],
      // 搜索条件
      select: "值班人",
      // 控制值班记录弹出框显示与隐藏
      dutyRecordsVisible: false,
      // 值班列表数据
      dutyList: [
        // {
        //   dutyState: true,
        //   dutyUser: "张三三",
        //   dutyTime: [
        //     "Fri Sep 10 2021 00:00:00 GMT+0800 (中国标准时间)",
        //     "Fri Oct 08 2021 00:00:00 GMT+0800 (中国标准时间)",
        //   ],
        //   dutyRecord: "15282781111",
        //   faultRecord: "1125189111@qq.com",
        // },
      ],
      watch: "",
      formData: "",
    };
  },
  mounted() {
    this.power = JSON.parse(window.sessionStorage.getItem("user"));
  },
  created() {
    // this.duty();
    this.getWatchList();
    this.getDutyList();
  },
  methods: {
    // 当前时间值班人信息获取
    // async duty() {
    //   const { data: res } = await this.$http.get("/business/duty/list", {
    //     params: this.queryInfo,
    //   });

    //   let dutyTime = res.all_duty.find((val) => {
    //     return this.$jutils.isDuringDate(val.start_time, val.end_time);
    //   });
    //   if (dutyTime != undefined) {
    //     this.watch = res.staff_data.find((vals) => {
    //       return vals.id == dutyTime.name_id;
    //     });
    //     const { data: result } = await this.$http.get("/str/decrypt", {
    //       params: { str: this.watch.phone_number },
    //     });
    //     this.watch.phone = result.str;
    //   } else {
    //     this.watch = { name: "" };
    //   }
    //   console.log(this.watch);
    // },
    // 分页功能
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryInfo.page = val;
      this.getDutyList();
    },
    // 获取值班列表
    getDutyList() {
      this.$http
        .get("/business/duty/list", { params: this.queryInfo })
        .then((res) => {
          // 将值班的时间信息 添加到数据中
          if (res.data.duty_data.length == 0) {
            this.dutyList = [];
          } else {
            this.total = res.data.total;
            res.data.duty_data.forEach((val) => {
              val.staff_data = res.data.staff_data.filter((vals) => {
                return val.name_id == vals.id;
              })[0];
              val.dutyTime = [val.start_time, val.end_time];
            });
            this.dutyList = res.data.duty_data;
            console.log("----------dutyList-------", this.dutyList);
          }
        });
      // .catch(() => {
      //   this.$message.error("获取数据失败");
      // });
    },
    // 获取人员信息
    getWatchList() {
      this.$http.get("/business/employee/list").then((res) => {
        console.log(res.data.date);
        this.watchList = res.data.date;
      });
      // console.log("-----人员信息------", this.watchList);
    },
    // 点击值班记录弹出框
    dutyRecords(scope) {
      console.log(scope.row);
      this.watch = scope.row.staff_data;
      this.dutyRecordsVisible = true;
    },

    searchDuty() {
      console.log("搜索");
      console.log(this.queryInfo);
      this.getDutyList();
    },
    resetSearch() {
      console.log("重置搜索内容");
      this.queryInfo.query_text = "";
      this.getDutyList();
    },
  },
};
</script>

<style lang="less" scoped>
.search {
  margin: 10px 0;

  .el-input {
    width: 34%;
  }
  .el-button {
    margin-left: 10px;
  }
}
.dutyState {
  margin: 3px 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
}
.title {
  color: #606266;
}
.footer {
  display: flex;
  padding-top: 12px;
  .pagination {
    margin-left: 20px;
  }
}
</style>